<template>
	<view class="contemt">
		<view class="ctn" @click="goAppDetail">
			<view class="ctn_left">
				<view class="iconImg"  :style="{background: '#ff0004'}" v-if='status == 2'>
					<span class="iconfont icon-weitongguo iconicon"></span>
				</view>
				<view class="iconImg"  :style="{background: '#ffc618'}" v-if='status == 0'>
					<span class="iconfont icon-dengdai iconicon"></span>
				</view>
				<view class="iconImg"  :style="{background: '#30b607'}" v-if='status == 1'>
					<span class="iconfont icon-tongguo iconicon"></span>
				</view>
				<view class="iconImg"  :style="{background: '#0389ff'}" v-if='status == 3'>
					<span class="iconfont icon-tubiao_tijiao iconicon"></span>
				</view>
				<view class="iconImg"  :style="{background: '#bfbfbf'}" v-if='status == -1'>
					<span class="iconfont icon-bianji1 iconicon"></span>
				</view>
				<view>
					<text v-if="status == 0">等待中</text>
					<text v-else-if="status == 1">已批准</text>
					<text v-else-if="status == 2">已驳回</text>
					<text v-else-if="status == 3">已提交</text>
					<text v-else-if="status == -1">自由</text>
				</view>
			</view>
			<view class="ctn_middle">
				<view class="middle_top">
					<view>
						<text>提交时间：{{ propTitlel }}</text>
					</view>
				</view>
				<view class="middle_bottom">
					<text>离职原因: {{ reason.sreason }}</text>
					<text class="leave-hours">离职说明: {{ reason.memo}}</text>
				</view>
			</view>
		</view>
		<view class="ctn_middle-btn" v-if="isBtn">
			<my-button class="confirm-btn" @click='comfirmBtn' width='140' height="50" v-if="showBtn">提交</my-button >
			<my-button class="confirm-btn" @click='checkPrograss' width='140' height="50" v-if="!showBtn" type="text">查看进程</my-button >
		</view>
	</view>
</template>

<script>
export default {
	name: 'my-Approval',
	data() {
		return {
			// iconList: ['/static/bg/ddz.png', '/static/bg/ytg.png', '/static/bg/wtg.png','/static/bg/wtg.png']
		};
	},
	props: {
		status: {
			type: Number,
			default: 1
		},
		propTitlel: {
			type: String,
			default: '2'
		},
		propdays: {
			default: '1.5'
		},
		reason:{
			type:Object
		},
		showBtn:{
			type:Boolean,
			default:true
		},
		isBtn:{
			type:Boolean,
			default:true
		}
	},
	methods: {
		checkPrograss(){
			this.$emit('prograss')
		},
		comfirmBtn(){
			this.$emit('confirm')
		},
		goAppDetail() {
			let newObj = {
				"status":this.status,
				"propTitlel":this.propTitlel,
				"propdays":this.propdays,
				"propDate":this.propDate
			}
			this.$emit('handleClick',newObj)
		}
	},
	created() {
		// console.log(this.timeArr)
	}
}
</script>

<style lang="scss" scoped>
	.leave-hours{
		margin-top: 10rpx;
	}
	.iconImg{
		display: flex;
		justify-content: center;
		align-items: center;
		width: 80rpx;
		height: 80rpx;
		border-radius: 50%;
		.iconicon{
			font-size:45rpx;
			color: #FFFFFF;
		}
	}
	.contemt{
		background: #FFFFFF;
		box-shadow: 0px 8rpx 24rpx 0px rgba(70, 66, 130, 0.1);
		border-radius: 16rpx;
		margin-bottom: 24rpx;
		padding: 16rpx 24rpx 16rpx 24rpx;
	}
	.ctn_middle-btn{
		width: 100%;
		display: flex;
		flex-direction:row-reverse;
		align-items: center;
	}
	.bianjiICon{
		font-size: 70rpx;
		color: #b4b4b4;
	}
.time-tip {
	margin: 0 10rpx;
}
.list-icon{
	font-size: 24rpx;
}
.imgIcon{
	display: inherit;
}
.ctn {
	display: flex;
	align-items: center;
	background-color: #ffffff;
	border-radius: 16rpx;
	.ctn_left {
		font-size: 20rpx;
		font-weight: 400;
		color: #a7a3a3;
		display: flex;
		flex-direction: column;
		align-items: center;
		image {
			width: 72rpx;
			height: 72rpx;
		}
	}
	.ctn_middle {
		margin-left: 28rpx;
		flex: 1;
		font-size: 32rpx;
		font-family: PingFangSC-Medium, PingFang SC;
		font-weight: 600;
		color: #121f2c;
		.middle_top {
			display: flex;
			justify-content: space-between;
			align-items: center;
			font-size: 28rpx;
			margin-bottom: 8rpx;
			color: #4a4a4a;
			.top_r {
				margin-left: 26rpx;
				color: #ff7707;
			}
		}

		.middle_bottom {
			display: flex;
			flex-direction: column;
			font-size: 12px;
			font-weight: 400;
			padding: 4rpx 0;
			color: #969696;
			
		}
	}
	.ctn_right {
		image {
			width: 48rpx;
			height: 48rpx;
		}
	}
}
</style>
